<template>
  <div class="planupdate">
    <div class="head">
      <span>省份选择：</span>
      <el-select v-model="sfmc" filterable placeholder="请选择">
        <el-option
          v-for="item in sfmcs"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <button @click="inquiry">查询</button>
      <button @click="change">修改</button>
    </div>

    <div class="zzc" v-show="isShow">
      <div
        class="xiugai"
        :style="{ top: activeTop + 'px', left: activeLeft + 'px' }"
        @mousedown="initPosition"
        @mouseup="endPosition"
      >
        <div class="item">
          <span>院系名称：</span>
          <el-input v-model="yxmc" placeholder="请输入内容"></el-input>
        </div>
        <div class="item">
          <span>专业名称：</span>
          <el-input v-model="zymc" placeholder="请输入内容"></el-input>
        </div>
        <div class="item">
          <span>学习年限：</span>
          <el-input v-model="xz" placeholder="请输入内容"></el-input>
        </div>
        <div class="item">
          <span>所属科类：</span>
          <el-input v-model="kllbdm" placeholder="请输入内容"></el-input>
        </div>
        <div class="item">
          <span>计划类别：</span>
          <el-input v-model="jhlbmc" placeholder="请输入内容"></el-input>
        </div>
        <div class="item">
          <span>招生人数：</span>
          <el-input v-model="zsrs" placeholder="请输入内容"></el-input>
        </div>
        <div class="item">
          <span>备注信息：</span>
          <el-input v-model="bz" placeholder="请输入内容"></el-input>
        </div>
        <el-button type="success" round @click="ok">确定</el-button>
        <el-button type="warning" round @click="cancel">取消</el-button>
      </div>
    </div>

    <el-table ref="singleTable" :data="tableData" height="720" border style="width: 100%" highlight-current-row @current-change="handleChange">
      <el-table-column prop="yxmc" label="院系名称" width="280">
      </el-table-column>
      <el-table-column prop="zymc" label="专业名称" width="280">
      </el-table-column>
      <el-table-column prop="xz" label="学制"> </el-table-column>
      <el-table-column prop="klmc" label="科类" width="280">
      </el-table-column>
      <el-table-column prop="zsrs" label="招生人数" width="240">
      </el-table-column>
      <el-table-column prop="jhlbmc" label="计划类别名称" width="280">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { request } from "../../network/request";
export default {
  name: "",
  data() {
    return {
      isShow: false,
      activeTop: 280,
      activeLeft: 800,
      tableData: [],
      sfmcs: [
        {
          value: "北京",
          label: "北京",
        },
        {
          value: "天津",
          label: "天津",
        },
        {
          value: "上海",
          label: "上海",
        },
        {
          value: "重庆",
          label: "重庆",
        },
        {
          value: "河北",
          label: "河北",
        },
        {
          value: "山西",
          label: "山西",
        },
        {
          value: "辽宁",
          label: "辽宁",
        },
        {
          value: "吉林",
          label: "吉林",
        },
        {
          value: "黑龙江",
          label: "黑龙江",
        },
        {
          value: "江苏",
          label: "江苏",
        },
        {
          value: "浙江",
          label: "浙江",
        },
        {
          value: "安徽",
          label: "安徽",
        },
        {
          value: "福建",
          label: "福建",
        },
        {
          value: "江西",
          label: "江西",
        },
        {
          value: "山东",
          label: "山东",
        },
        {
          value: "河南",
          label: "河南",
        },
        {
          value: "湖北",
          label: "湖北",
        },
        {
          value: "湖南",
          label: "湖南",
        },
        {
          value: "广东",
          label: "广东",
        },
        {
          value: "海南",
          label: "海南",
        },
        {
          value: "四川",
          label: "四川",
        },
        {
          value: "贵州",
          label: "贵州",
        },
        {
          value: "云南",
          label: "云南",
        },
        {
          value: "陕西",
          label: "陕西",
        },
        {
          value: "甘肃",
          label: "甘肃",
        },
        {
          value: "青海",
          label: "青海",
        },
        {
          value: "台湾",
          label: "台湾",
        },
        {
          value: "内蒙古",
          label: "内蒙古",
        },
        {
          value: "广西",
          label: "广西",
        },
        {
          value: "西藏",
          label: "西藏",
        },
        {
          value: "宁夏",
          label: "宁夏",
        },
        {
          value: "新疆",
          label: "新疆",
        },
        {
          value: "香港",
          label: "香港",
        },
        {
          value: "澳门",
          label: "澳门",
        },
      ],
      sfmc: "",
      yxmc: "",
      zymc: "",
      jhlbmc: "",
      kllbdm: "",
      xz: "",
      zsrs: "",
      bz: "",
      startX: 0,
      startY: 0,
      moveX: 0,
      moveY: 0,
    };
  },
  methods: {
    inquiry() {
      if (this.sfmc != "") {
        console.log("开始查询");
        request({
          url: "http://118.31.51.131:8081/api/zsjh/ck",
          method: "get",
          params: {
            sfmc: this.sfmc,
            token: sessionStorage.getItem("token"),
          },
        })
          .then((value) => {
            console.log(value);
            this.tableData = value.data;
          })
          .catch((err) => {
            console.log(err);
            alert("查询失败");
          });
      }
    },
    handleChange(val) {
      if(val == null) {
        return
      }
      this.yxmc = val.yxmc
      this.zymc = val.zymc
      this.xz = val.xz
      this.kllbdm = val.klmc
      this.zsrs = val.zsrs
      this.jhlbmc = val.jhlbmc
    },
    change() {
      if (this.sfmc != "") {
        this.isShow = true;
      }
    },
    ok() {
      if (
        this.yxmc == "" ||
        this.zymc == "" ||
        this.jhlbmc == "" ||
        this.xz == "" ||
        this.kllbdm == "" ||
        this.zsrs == ""
      ) {
        alert("除备注外均需填写");
      } else {
        request({
          url: "http://118.31.51.131:8081/api/zsjh/xg",
          method: "post",
          data: {
            yxmc: this.yxmc,
            zymc: this.zymc,
            jhlbmc: this.jhlbmc,
            xz: this.xz,
            klmc: this.kllbdm,
            zsrs: this.zsrs,
            sfmc: this.sfmc,
            bz: this.bz,
          },
          params: {
            token: sessionStorage.getItem("token"),
          },
        })
          .then((value) => {
            console.log(value.data);
            if (value.data == "修改内容非法,修改失败") {
              alert("修改内容非法,修改失败");
            } else {
              request({
                url: "http://118.31.51.131:8081/api/zsjh/ck",
                method: "get",
                params: {
                  sfmc: this.sfmc,
                  token: sessionStorage.getItem("token"),
                },
              }).then((value) => {
                console.log(value);
                this.tableData = value.data;
                this.isShow = false
                setTimeout(() => {
                  alert("修改成功")
                },100)
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    cancel() {
      this.isShow = false;
    },
    initPosition(e) {
      console.log(e.clientX);
      this.startX = e.clientX;
      this.startY = e.clientY;
      let a = this.activeLeft;
      let b = this.activeTop;
      document.onmousemove = (e) => {
        console.log(e.clientX);
        this.moveX = e.clientX - this.startX;
        this.moveY = e.clientY - this.startY;
        this.activeLeft = a + this.moveX;
        this.activeTop = b + this.moveY;
      };
    },
    endPosition() {
      document.onmousemove = null;
      document.onmouseup = null;
    },
  },
  beforeCreate() {
    if (sessionStorage.getItem("token") == null) {
      this.$router.push("/login");
    } else {
      let token = sessionStorage.getItem("token");
      let length = sessionStorage.getItem("token").length;
      if (token[length - 5] == "0") {
        this.$router.replace("/login");
      }
    }
  },
  components: {},
};
</script>

<style scoped>
.head {
  height: 80px;
  border-bottom: 1px solid black;
}
.head span {
  font-size: 20px;
  line-height: 80px;
  margin-left: 25px;
}
.head button:nth-of-type(1) {
  margin-left: 900px;
}
.head button:nth-of-type(2) {
  margin-left: 100px;
}
.head button {
  width: 100px;
  height: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #fff;
  background-color: rgb(192, 51, 56);
}
button:active {
  opacity: 0.8;
}
.planupdate ::v-deep .el-table .cell {
  text-align: center;
}
.zzc {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 1;
}
.zzc .xiugai {
  position: absolute;
  left: 50%;
  height: 600px;
  width: 600px;
  border-radius: 50px;
  background-color: #fff;
}
.item {
  margin: 30px 110px;
}
.el-button {
  margin-left: 150px;
}
.xiugai .el-input {
  width: 300px;
}
</style>